<template>
  <l-layout class="l-tab-page">
    <l-panel style="padding: 0px">
      <template #toolLeft>
        <div style="width: 100%; height: 40px">
          <el-form ref="form" :model="formData" label-width="80px">
            <el-row>
              <el-col :span="4">
                <el-form-item label="单位类型:">
                  <l-select
                    placeholder="please select"
                    :options="unitTypeOptions"
                    v-model="formData.unitTypeId"

                    @change="confirm"
                  >
                  </l-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="保留小数:">
                  <l-select
                    placeholder="please select"
                    :options="decimalDigitsOptions"
                    v-model="formData.decimalDigits"

                    @change="confirm"
                  >
                  </l-select>
                </el-form-item>
              </el-col>
              <!--<el-col :span="4">
                <el-form-item label-width="20px">
                  <el-button type="primary" size="mini" @click="confirm"
                    >确认</el-button
                  >
                </el-form-item>
              </el-col>-->
            </el-row>
          </el-form>
        </div>
      </template>
      <template #toolRight>
        <l-tool-btns :hasAdd="false"></l-tool-btns>
      </template>
      <div class="l-rblock" style="overflow: hidden auto; padding: 16px">
        <el-row :gutter="16">
          <el-col v-for="(item, index) in unitList" :key="index" :span="12">
            <el-card shadow="never">
              <p style="text-align: center">{{ item.typeName }}换算</p>
              <el-form style="padding: 16px 32px 0 32px">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item>
                      <el-input-number
                        controls-position="right"
                        :min="0"
                        size="mini"
                        v-model="item.fromValue"
                        :placeholder="$t('please enter')"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item>
                      <l-select
                        v-model="item.from"
                        valueKey="f_id"
                        labelKey="f_name"
                        :options="getUnitOptions(item)"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col><div style="text-align:center;margin-bottom:16px;font-size:24px;color:#5E95FF;" ><i class="learun-icon-down-arrow" /></div></el-col>
                  <el-col :span="12">
                    <el-form-item>
                      <el-input
                        type="number"
                        :value="getValue(item)"
                        size="mini"
                        readonly
                      ></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item>
                      <l-select
                        v-model="item.to"
                        valueKey="f_id"
                        labelKey="f_name"
                        :options="getUnitOptions(item)"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </l-panel>
  </l-layout>
</template>


<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      formData: {
        unitTypeId: "",
        decimalDigits: 0,
      },
      decimalDigitsOptions: [
        { value: 0, label: "整数" },
        { value: 2, label: "2位小数" },
        { value: 4, label: "4位小数" },
        { value: 6, label: "6位小数" },
      ],

      unitTypeId: "",
      decimalDigits: 0,

      // 换算表单
      concersionFormData: {
        typing: 0, // 输入值
        typingUnit: "", // 输入值单位
        output: "", // 输出值
        outputUnit: "", // 输入值单位
      },
      DecimalDigitsOptions2: [],
    };
  },
  computed: {
    unitList() {
      let res = this.list.filter((t) => t.baseUnit && t.units.length > 1 && t.list.length > 0);

      if (this.unitTypeId) {
        res = res.filter((t) => t.typeId == this.unitTypeId);
      }

      res.forEach((item) => {
        this.$set(item, "from", "");
        this.$set(item, "fromValue", undefined);
        this.$set(item, "to", "");
      });

      return res;
    },
    unitTypeOptions() {
      return this.list.filter((t) => t.baseUnit && t.units.length > 1 && t.list.length > 0).map((t) => ({ value: t.typeId, label: t.typeName }));
    },
  },
  methods: {
    confirm() {
      this.unitTypeId = this.formData.unitTypeId;
      this.decimalDigits = this.formData.decimalDigits;
    },
    getUnitOptions(item) {
      console.log(item,'item')
      return item.units.filter(
        (t) =>
          t.f_isstandard == 0 ||
          item.list.findIndex((t2) => t2.f_ShiftUnitId == t.f_id) > -1
      );
    },
    getValue(item) {
      const { from, fromValue, to } = item;
      let value;
      if (from && fromValue && to) {
        if (from == to) {
          value = fromValue;
        } else {
          if (from == item.baseUnit.f_id) {
            const toUnit = item.list.find((t) => t.f_ShiftUnitId == to);
            value = fromValue * toUnit.f_Quantity;
          } else if (to == item.baseUnit.f_id) {
            const fromUnit = item.list.find((t) => t.f_ShiftUnitId == from);
            value = fromValue / fromUnit.f_Quantity;
          } else {
            const toUnit = item.list.find((t) => t.f_ShiftUnitId == to);
            const fromUnit = item.list.find((t) => t.f_ShiftUnitId == from);
            value = (fromValue / fromUnit.f_Quantity) * toUnit.f_Quantity;
          }
        }
      }
      if (value == undefined) {
        return value;
      } else {
        return value.toFixed(this.decimalDigits);
      }
    },
  },
};
</script>